<template>

      <SearchBar
        @query="query"
      ></SearchBar>

      <TableList
        :data = data
        :pagination=pagination
        @changePage="onCurrentChange"
        @changPageSize="onChangPageSize"
        @showAddDialog="showAddDialog"
        @showEditDialog="showEditDialog"
        @refresh="refresh"
      ></TableList>

      <AddForm
        :addFormVisiable="addFormVisiable"
        @close="closeAdd"
      ></AddForm>

      <EditForm
        :editFormVisiable="showFormVisiable"
        :data="singleData"
        @close="closeEdit"
        @refresh="refresh"
      ></EditForm>
</template>

<script setup lang="jsx">
  import { ref,onMounted } from 'vue'
  import { findById, getList } from '@/api/nursing_project_api';
  import { MessagePlugin } from 'tdesign-vue-next';
  import SearchBar from './components/SearchBar.vue';
  import TableList from './components/TableList.vue';
  import AddForm from './components/AddForm.vue';
import EditForm from './components/EditForm.vue';


  // 表格需要的列表数据
  const data = ref([])
  const singleData = ref({})

  const addFormVisiable = ref(false)
  const showFormVisiable = ref(false)

  function showAddDialog() {
    addFormVisiable.value = true
  }

  function closeAdd() {
    addFormVisiable.value = false
    loadList()
  }

  function closeEdit() {
    showFormVisiable.value=false
  }

  async function showEditDialog(id) {
    showFormVisiable.value = true

    // 获取回显的数据
    const resp = await findById(id)
    singleData.value = resp
    
  }



  // 分页的参数
  const pagination = ref({
    defaultCurrent: 1,
    defaultPageSize: 5,
    total: 10,
  });


  onMounted(()=>{
     loadList()
  })

  function query(params) {
    console.log("查询条件：",params);
    pagination.value.name = params.name
    pagination.value.status = params.status
    pagination.value.page = 1
    loadList(pagination.value)
  }


  function onCurrentChange(page) {
    pagination.value.page = page
    loadList(pagination.value)
  }

  function onChangPageSize(size) {
    pagination.value.pageSize=size
    loadList(pagination.value)
  }

  // 添加完成、编辑完成、删除完成、启用完成  刷新最新数据
  const refresh = ()=>{
    loadList(pagination.value)
  }

  // 加载数据  刷新列表
  const loadList = async (params)=> {
    const resp = await getList(params)
    console.log("列表数据：",resp);

    data.value = resp.records

    pagination.value.current=resp.page
    pagination.value.pageSize = resp.pageSize
    pagination.value.total = resp.total

    // this.$message.info('护理项目列表加载成功！');
    MessagePlugin("success","护理项目列表加载成功！")
  }


 
</script>



<style lang="less" scoped></style>